﻿
<div>

    <script src="~/Scripts/dhtmlxscheduler/dhtmlxscheduler.js"></script>
    <script src="~/Scripts/dhtmlxscheduler/locale/locale_cn.js"></script>
    <script src="~/Scripts/dhtmlxscheduler/ext/dhtmlxscheduler_minical.js"></script>
    <script src="~/Scripts/dhtmlxscheduler/ext/dhtmlxscheduler_active_links.js"></script>
    <link href="~/Content/dhtmlxscheduler/dhtmlxscheduler.css" rel="stylesheet" />

    <style>
        .dhx_cal_event_clear {
            height: auto;
        }

        .dhx_cal_event .dhx_title {
            height: auto;
        }

        .dhx_cal_event_line.custom, .dhx_cal_event.custom div {
            background-color: #fd7;
            border-color: #da6;
            color: #444;
        }
    </style>

    <div id="scheduler_here" class="dhx_cal_container" style='width:100%;height:600px;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>

            <div class="dhx_cal_date"></div>


            <div class="dhx_cal_tab" name="day_tab" style="right:332px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>

            <div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
            <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>

        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>


    <script type="text/javascript" charset="utf-8">

        //scheduler.config.readonly = true;
        scheduler.config.multi_day = true;

        scheduler.config.first_hour = 8;
        scheduler.config.last_hour = 18;
        scheduler.init('scheduler_here');
        scheduler.templates.event_class = function (s, e, ev) { return ev.custom ? "custom" : ""; };
        scheduler.parse(@Html.Raw(ViewBag.JsonData), "json");

        var dp = new dataProcessor("@Url.Action("Edit")");
        dp.init(scheduler);

        function show_minical(){
            if (scheduler.isCalendarVisible())
                scheduler.destroyCalendar();
            else
                scheduler.renderCalendar({
                    position:"dhx_minical_icon",
                    date:scheduler._date,
                    navigation:true,
                    handler:function(date,calendar){
                        scheduler.setCurrentView(date);
                        scheduler.destroyCalendar();
                    }
                });
        }
    </script>
</div>